<template>

	<div class="shopcar-container">
		<!-- 商品列表区域 -->
	    <div class="goods-list">
	        <div class="mui-card" v-for="item in $store.state.car"  :key="item.id">
	      		<div class="mui-card-content">
	      			<div class="mui-card-content-inner">
	      				<mt-switch v-model="item.selected" @change="modifySeleced(item.id)"></mt-switch>
	      				<img :src="item.info.images[0]">
	      				<div class="info">
	      					<h1>{{ item.info.name }}</h1>
	      					<p>
	      						<span class="price">￥2199</span>
	      						<numbox :shopId="item.id" ></numbox>
	      						<a href="#" @click.prevent="deleteShop(item.id)">删除</a>
	      					</p>
	      				</div>
	      			</div>
	      		</div>
	      	</div>
	    </div>

	    <!-- 结算区域 -->
	    <div class="mui-card">
	    	<div class="mui-card-content">
	    		<div class="mui-card-content-inner jiesuan">	    			
	    			<div class="left">
	    				<p>总计（不含运费）</p>
	    				<p>已勾选的商品 
	    					<span>{{ this.$store.getters.getGoodsCountAndAmount["count"] }}</span> 件，
	    					总价 
	    					<span>{{ this.$store.getters.getGoodsCountAndAmount["amount"] }}</span></p>
	    			</div>
	    			<mt-button type="danger">去结算</mt-button>
	    		</div>	    		
	    	</div>
	    </div>

	</div>
	
</template>

<script>
	import numbox from "../subcomponents/shopcar_numbox.vue"

	export default {
		methods:{

			//删除这种商品在store中的购物信息 以及 更新到localStorage
			deleteShop(id){
				this.$store.commit("deleteShop",id)
			},

			//更新商品的信息 到localStorage
			modifySeleced(id){
				var count = this.$store.getters.getNumObj[id];
				var selected = this.$store.getters.getSelectObj[id];
				this.$store.commit("updateToCar",{id:id,count:count,selected:selected})
			}
		},
		components:{
			numbox,
		}
	}
</script>

<style lang="scss" scoped>
	.shopcar-container{
		background-color: #eee;
		overflow: hidden;
		.goods-list{
			.mui-card-content-inner{
				display: flex;
				justify-content:space-around;
				align-items:center;

			    img{
			    	width: 60px;
			      	height: 60px;
			      	margin-left: 5px;
			    }
			   
			    .info{
			    	display: flex;
			    	flex-direction:column;
			    	justify-content:space-between;
			    	width: 208px;
			    	height: 75px;
			     	h1{
			     		font-size: 14px;
			     		text-indent: 0.5em;
			       	}
			      	p{
			      		display: flex;
			      		justify-content:space-around;
			      		align-items:center;			      		
			      	}
			    	.price {
			    		color: red;
			    		font-weight:bold;
			    	}
				}
			}
			
		}

		.jiesuan {
			display: flex;
			justify-content:space-around;
			align-items:center;

			.left {
				span {
					color: red;
					font-size: 16px;
					font-weight: bold;
				}
			}
		}
	}
</style>